<script setup>
import {Delete, Edit, Plus, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
const form=ref({});
const text=ref("");
const rates=ref([])
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)
onMounted(()=>{
  getData();
})
const getData=()=>{
  axios.get("http://localhost:8080/rate",{
    params:{
      pageNum:currentPage.value,
      pageSize:pageSize.value
    }
  }).then(res=>{
    rates.value=res.data.records
    console.log(res);
    total.value=res.data.total
  }).catch(err=>{
    ElMessage.error(err);
  })
}
//切换每页显示条数
const handleSizeChange=(pagesize)=>{
  pageSize.value=pagesize
  getData();
}
//切换当前页码
const handleCurrentChange=(pageNum)=>{
  currentPage.value=pageNum
  getData();
}
//多选事件
let multipleSelection = ref([]);
let multipleSelection2 = ref([]);
const handleSelectChange = (val) => {
  multipleSelection.value=[]
  multipleSelection2.value=[]
  val.forEach(item=>{
    multipleSelection2.value.push(item.sno)
  })
  val.forEach(item=>{
    multipleSelection.value.push(item.cno)
  })
}
const handleOpenList=()=>{
  const israte="审核通过";
  ElMessageBox.confirm(
      '您确定要审核通过选择的数据吗?',
      '危险操作',
      {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}
  ).then(() => {
    axios.put(`http://localhost:8080/rateCheck/${multipleSelection2.value}/${multipleSelection.value}/${israte}`
    ).then(res=>{
      getData();
      ElMessage.success("审核通过成功");
    }).catch(err=>{
      ElMessage.error(err);
    })
  })
}
const handleDeleteRate=(row)=>{
  ElMessageBox.confirm(
      '您确定要驳回选择的数据吗?',
      '危险操作',
      {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}
  ).then(() => {
    handleDelete(row);
  })
}
const handleDelete=(row)=>{
  axios.delete(`http://localhost:8080/rate/${row.sno}/${row.cno}`).then(res=>{
    ElMessage.success("驳回成功");
    getData();
  }).catch(err=>{
    ElMessage.error(err);
  })
}
// 排序事件
const handleSortChange = (sortData) => {
  const {prop, order} = sortData;
  rates.value=rates.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] > b[prop] ? 1 : -1;
    } else {
      return a[prop] < b[prop] ? 1 : -1;
    }
  });
}
const handleSearch=(val)=>{
  val=text.value
  if(val.length>0){
    axios.get("http://localhost:8080/rateByCno",{
      params:{
        pageNum:currentPage.value,
        pageSize:pageSize.value,
        cno:val
      }
    }).then(res=>{
      rates.value=res.data.records
      total.value=res.data.total
    }).catch(err=>{
      ElMessage.error(err);
    })
  }else {
    getData();
  }
  text.value=""
}
</script>

<template>
  <div>
    <div style="display: flex; align-items: center;">
      <el-input placeholder="请输入课程号" id="text" style="flex: 1; margin-right: 10px;" v-model="text"></el-input>
      <el-button :icon="Search" type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="handleOpenList">审核通过</el-button>
    </div>
    <el-table class="currentTable" :data="rates"
              @selection-change="handleSelectChange"
              @sort-change="handleSortChange"
              :header-cell-style="{ background: '#f6f9fa'}">
      <!--el-table-column列-->
      <el-table-column type="selection"/>
      <el-table-column prop="cno" label="课程号" sortable></el-table-column>
      <el-table-column prop="session" label="学年" sortable></el-table-column>
      <el-table-column prop="semester" label="学期"></el-table-column>
      <el-table-column prop="sno" label="学号" sortable></el-table-column>
      <el-table-column prop="teachingContent" label="教学内容"></el-table-column>
      <el-table-column prop="teachingFun" label="教学趣味"></el-table-column>
      <el-table-column prop="communication" label="沟通表达"></el-table-column>
      <el-table-column prop="personalAdvice" label="学生建议"></el-table-column>
      <el-table-column prop="ischeck" label="是否审核"></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template #default="{ row }">
          <el-button type="danger" size="small" :icon="Delete" @click="handleDeleteRate(row)" v-if="row.ischeck===null">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="justify-content: center;margin-top: 8px"
    />
  </div>
  <el-form style="text-align: center">
    <div>1-特差，2-差，3-合格，4-良好，5-优秀</div>
  </el-form>
</template>

<style scoped>

</style>